<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      title="收回发布文档"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="450"
      :width="1000"
    >
      <CollapseContainer title="图档基础信息" :canExpan="false">
        <BasicForm @register="registerForm" />
      </CollapseContainer>
      <BasicTable
        @register="registerTable"
        :rowSelection="{
          type: 'checkbox',
          selectedRowKeys: checkedKeys,
          onChange: onSelectChange,
        }"
      >
        <!-- 表格顶部左侧区域 -->
        <template #tableTitle>
          <Alert type="info" show-icon>
            <template #message>
              <template v-if="checkedKeys.length > 0">
                <span>已选中{{ checkedKeys.length }}条记录</span>
                <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
              </template>
              <template v-else>
                <span>未选中任何文档</span>
              </template>
            </template>
          </Alert>
        </template>
        <!-- 发布时间 -->
        <template #releaseTime="{ text: releaseTime }">
          <span>
            {{ proxy.$filters.filterTime(releaseTime) }}
          </span>
        </template>
        <!-- 截止时间 -->
        <template #endTime="{ text: endTime }">
          <span>
            {{ proxy.$filters.filterTime(endTime) }}
          </span>
        </template>
      </BasicTable>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { getCurrentInstance, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { CollapseContainer } from '/@/components/Container';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicDocForm, getRetrieveColumns } from './tableData';
  import { Alert } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  import { GetPdmObjReleasedDoc, DeletePublishedDoc } from '/@/api/demo/document';

  const { t } = useI18n();
  const { proxy }: any = getCurrentInstance();
  const { createMessage } = useMessage();
  const emit = defineEmits(['register', 'success']);

  const checkedKeys = ref<Array<string | number>>([]); // 选中的键
  const selectedRows = ref<any>([]); // 选中的行数据
  const currentRecord = ref<any>({}); // 当前行数据

  // 点击行事件
  const onSelectChange = (selectedRowKeys: (string | number)[], selectedRowsData: any) => {
    checkedKeys.value = selectedRowKeys; // 更新选中的键
    selectedRows.value = selectedRowsData; // 更新选中的行数据
  };

  // 点击确定按钮事件
  const handleSubmit = () => {
    const params = {
      oid: currentRecord.value.oid,
      userNames: selectedRows.value.map((item: any) => item.sUserId),
    };
    DeletePublishedDoc(params).then((res) => {
      if (res) {
        createMessage.success('收回成功');
        emit('success');
        handleCancel();
      }
    });
  };

  // 点击取消按钮事件
  const handleCancel = () => {
    currentRecord.value = {};
    checkedKeys.value = [];
    selectedRows.value = [];
    closeModal();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    currentRecord.value = data;
    setFieldsValue(data);
    GetPdmObjReleasedDoc(data.oid).then((res) => {
      setTableData(res);
    });
  });

  // 图档基础信息
  const [registerForm, { setFieldsValue }] = useForm({
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
    schemas: BasicDocForm(),
    showResetButton: false,
    showSubmitButton: false,
  });

  // 表格初始化
  const [registerTable, { setTableData }] = useTable({
    titleHelpMessage: 'releaseRetrieve',
    columns: getRetrieveColumns(), // 表格列配置
    bordered: true,
    useSearchForm: false,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: false,
    maxHeight: 220,
  });
</script>
